import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. 下载vue-touer 3.6.5
// 2. 引入VueRouter
// 3. Vue.use()
// 4. 创建router实例
// 5. 挂载到vue根实例上

// @别名 ==> 指代的是src目录，可以直接从src触发，找文件 可维护性高
import Find from '@/views/find.vue'
import My from '@/views/my.vue'
import Friend from '@/views/friend.vue'

// 在vue中，使用vue的插件，都需要调用Vue.use() 
// Vue.use 可以进行插件的内部初始化  符合Vue插件的语法就需要使用
Vue.use(VueRouter)

// Vue.use本身就是一个函数，用来安装插件
// 1. 先判断这个插件有没有安装过, 如果安装过，return
// 2. 如果plugin没有安装过，
        // 如果plugin自带install方法， 执行它
        // VueRouter.install.apply(VueRouter, [vm, a, b, c])
        // 如果VueRouter内部没有install，并且它VueRouter本身是一个函数，执行它
        // VueRouter.apply(null, [vm, a, b, c])
// 3. 用一个数组来存已经注册过的插件

// 核心两个步骤
// 1. 配置路由规则
const router = new VueRouter({
  // 自定义激活的类名
  linkActiveClass:'my-active',
  linkExactActiveClass:'my-exact-active',
  routes:[
    // path 指的是URL路径
    { path: '/find', component: Find}, // route ==> 一条一条的路由规则
    { path: '/my', component: My}, 
    { path: '/friend', component: Friend}, 
  ]
})
// 区分router routes route 
// 1. router: 整个全局最大的路由实例，只有一个，唯一的
// 2. routes: 路由规则的列表，里面是一个数组，存了很多很多的路由规则  [{},{},{}]
// 3. route : 一条路由规则，是一个对象  {path:'', component:xx }  ==> route

export default router